<template>
	<view class="coupon-page">
		<!-- 自定义头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						我的优惠券
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 空状态 -->
			<view v-if="!loading && couponList.length === 0" class="empty-container">
				<view class="empty-icon">
					<text class="cuIcon-ticket"></text>
				</view>
				<view class="empty-text">暂无优惠券</view>
				<view class="empty-desc">您还没有优惠券，快去领取吧</view>
				<!-- <button class="get-coupon-btn" @click="goToCouponCenter">
					<text class="btn-icon">🎁</text>
					<text class="btn-text">去领券中心</text>
				</button> -->
			</view>

			<!-- 优惠券列表 -->
			<view v-else-if="!loading && couponList.length > 0" class="coupon-list">
				<view class="coupon-item" v-for="(item, index) in couponList" :key="index"
					:class="{ expired: item.status === 'expired', used: item.status === 'used' }">
					<!-- 优惠券丝带 -->
					<view v-if="item.isLimited" class="coupon-ribbon">限时</view>

					<!-- 优惠券内容 -->
					<view class="coupon-content">
						<!-- 左侧金额区域 -->
						<view class="coupon-amount">
							<text class="currency">¥</text>
							<text class="amount">{{item.amount}}</text>
						</view>

						<!-- 右侧详情区域 -->
						<view class="coupon-details">
							<view class="coupon-title">{{item.title}}</view>
							<view class="coupon-desc">{{item.description}}</view>
							<view class="coupon-terms">
								<text class="validity">有效期至：{{formatDate(item.expireDate)}}</text>
								<text v-if="item.limitDesc" class="limit-desc">{{item.limitDesc}}</text>
							</view>
						</view>

						<!-- 状态标识 -->
						<view class="coupon-status">
							<view v-if="item.status === 'expired'" class="status-badge expired">
								<text class="status-text">已过期</text>
							</view>
							<view v-else-if="item.status === 'used'" class="status-badge used">
								<text class="status-text">已使用</text>
							</view>
							<view v-else class="status-badge valid">
								<text class="status-text">可使用</text>
							</view>
						</view>
					</view>

					<!-- 使用按钮 -->
					<view v-if="item.status === 'valid'" class="coupon-action">
						<button class="use-btn" @click="useCoupon(item)">
							<text class="use-text">立即使用</text>
						</button>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';

	export default {
		components: {
			headerSlotVue,
		},
		data() {
			return {
				loading: false,
				couponList: [],
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.loadCoupons()
		},
		onPullDownRefresh() {
			this.refreshCoupons()
		},
		methods: {
			async loadCoupons() {
				try {
					this.loading = true
					// 模拟数据加载
					await new Promise(resolve => setTimeout(resolve, 1000))

					// 模拟优惠券数据
					this.couponList = []
				} catch (error) {
					console.error('加载优惠券失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},

			async refreshCoupons() {
				this.couponList = []
				await this.loadCoupons()
			},

			formatDate(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
			},

			useCoupon(coupon) {
				uni.showModal({
					title: '使用优惠券',
					content: `确定要使用"${coupon.title}"吗？`,
					success: (res) => {
						if (res.confirm) {
							// 跳转到相关页面使用优惠券
							this.$router.smartNavigate({
								url: '/pages/homePages/cleaningService'
							})
						}
					}
				})
			},

			goToCouponCenter() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},

			closePage() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;

		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;

			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}

		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;

		.empty-icon {
			margin-bottom: 32rpx;

			.cuIcon-ticket {
				font-size: 120rpx;
				color: #c0c4cc;
			}
		}

		.empty-text {
			font-size: 32rpx;
			color: #606266;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 28rpx;
			color: #909399;
			margin-bottom: 48rpx;
		}

		.get-coupon-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 40rpx;
			background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
			color: #FFFFFF;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-weight: 500;
			border: none;
			transition: all 0.2s;

			&:active {
				transform: scale(0.95);
			}

			.btn-icon {
				font-size: 24rpx;
				margin-right: 8rpx;
			}

			.btn-text {
				font-size: 28rpx;
			}
		}
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.coupon-list {
		.coupon-item {
			position: relative;
			margin-bottom: 32rpx;
			background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
			border-radius: 20rpx;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
			color: white;
			overflow: hidden;
			transition: all 0.3s ease;

			&.expired {
				background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
				opacity: 0.7;
			}

			&.used {
				background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
				opacity: 0.7;
			}

			&:active {
				transform: translateY(-3rpx);
				box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.15);
			}

			.coupon-ribbon {
				position: absolute;
				top: 12rpx;
				right: -40rpx;
				background: #ff4757;
				padding: 4rpx 50rpx;
				transform: rotate(45deg);
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				font-size: 24rpx;
				font-weight: 600;
				z-index: 2;
			}

			.coupon-content {
				display: flex;
				align-items: center;
				padding: 32rpx 24rpx;
				position: relative;

				.coupon-amount {
					display: flex;
					align-items: center;
					justify-content: center;
					min-width: 120rpx;
					margin-right: 24rpx;

					.currency {
						font-size: 28rpx;
						margin-right: 4rpx;
					}

					.amount {
						font-size: 48rpx;
						font-weight: 700;
						line-height: 1;
						text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
					}
				}

				.coupon-details {
					flex: 1;
					min-width: 0;

					.coupon-title {
						font-size: 32rpx;
						font-weight: 600;
						margin-bottom: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.coupon-desc {
						font-size: 26rpx;
						opacity: 0.9;
						margin-bottom: 12rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.coupon-terms {
						font-size: 24rpx;
						opacity: 0.8;
						line-height: 1.4;

						.validity {
							display: block;
							margin-bottom: 4rpx;
						}

						.limit-desc {
							display: block;
							font-size: 22rpx;
							opacity: 0.7;
						}
					}
				}

				.coupon-status {
					margin-left: 16rpx;

					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 16rpx;
						text-align: center;

						&.valid {
							background: rgba(255, 255, 255, 0.2);
						}

						&.expired,
						&.used {
							background: rgba(255, 255, 255, 0.1);
						}

						.status-text {
							font-size: 22rpx;
							font-weight: 500;
						}
					}
				}
			}

			.coupon-action {
				padding: 0 24rpx 24rpx;

				.use-btn {
					width: 100%;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.2);
					color: #FFFFFF;
					border: 2rpx solid rgba(255, 255, 255, 0.3);
					border-radius: 12rpx;
					font-size: 28rpx;
					font-weight: 500;
					transition: all 0.2s;

					&:active {
						background: rgba(255, 255, 255, 0.3);
						transform: scale(0.98);
					}

					.use-text {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>